<template>
	<div>
		<div class="fixed-top">
			<app-top-search v-on:clickSerach="ClickSearch"></app-top-search>
			<app-top-screen :insurcom="insurcom" v-on:clickLable="clickLableItem"></app-top-screen>
		</div>
		<app-nav-bar></app-nav-bar>
		
		<app-proudct-list :where="where" :keyword="keyword"></app-proudct-list>
		
	</div>
</template>
<script>
	import FindSearch from '../../../components/find/FindSearch.vue' // 顶部搜索
	import FindScreen from '../../../components/find/FindScreen.vue' //筛选框
	import FindList from '../../../components/find/FindProudct.vue' // 产品列表
	import NavBar from '../../../components/public/tabNavBar.vue' //底部导航栏
	import {api} from '../../../gloabl/api.js'
	export default{
		data:function(){
			return{
				page:1,
				page_size:6,
				insurcom:[],
				insurproudct:[],
				where:{
					com:[],
					product:[]
				},
				keyword:'',
			}
		},
		components:{
			'app-nav-bar' : NavBar,
			'app-top-search' : FindSearch,
			'app-top-screen' : FindScreen,
			'app-proudct-list' : FindList
		},
		mounted:function(){
			mui.init({
				swipeBack:true
			});
			this.getBaseData();
		},
		methods:{
			getBaseData(){ //获取基础数据
				mui.showLoading("正在加载..","div");//遮罩层
				let me = this;
				let allComanye = api.getAllInsurCompaniesApi();
				let getProuctApi = api.getProuctApi([],[],me.page,me.page_size); 
				let query = '{'+allComanye+getProuctApi+'}';
				me.$http.post(url.graphql,{query:query})
				.then((res)=>{
					mui.hideLoading();
					me.insurcom = res.data.data.allInsurCompanies;
					me.insurproudct = res.data.data.listProducts;
				}).catch(function (error) {
					mui.alert('请求超时')
				})
				
			},
			clickLableItem(where){
				this.where = where;
			},
			//搜索回调
			ClickSearch(val){
				this.keyword = val;
			}
		}
	}
</script>
<style scoped="scoped">
	.fixed-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 3;
	}
</style>